<template>
  <div class="wrapper" @click="handleClick">
    <el-row :gutter="10">
      <el-col :span="7">
        <span class="time">{{time}}</span>
      </el-col>
      <el-col :span="1">
        <div class="point">
          <span :style="{background: pointColor}"/>
        </div>
      </el-col>
      <el-col :span="13">
        <span class="content">{{content}}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ToDoItem',
  props: {
    time: {
      required: true,
      type: [String, Number]
    },
    pointColor: {
      required: false,
      type: String,
      default: 'red'
    },
    content: {
      required: false,
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">

  .wrapper:hover{
    color: #409EFF;
  }

  .wrapper{
    margin: 4px 0;
    padding: 0 4px;
    font-size: 14px;
    color: #303133;
    font-family: Arial,Helvetica Neue,Helvetica,Microsoft YaHei,Hiragino Sans GB,Pingfang SC,serif;
    cursor: pointer;

    .time{
    }

    .point{
      width: 18px;
      height: 18px;
      position: relative;

      span{
        display: table-cell;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        background: yellow;
        top: 6px;
      }

    }

    .content{

    }

  }

</style>
